<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .container {
            width: 1170px;
            margin: auto;
        }

        .header {
            background-color: #eee;
            padding: 20px 0;
        }

        .header .logo {
            width: 60px;
            height: 60px;
            background-color: #f00;
            float: left;
        }

        .header ul {
            float: left;
        }

        .header li {
            float: left;
            margin-left: 40px;
            line-height: 60px;
        }

        .header p {
            float: right;
            line-height: 60px;
        }


        .main {
            background-color: #ddd;
        }

        .aside {
            width: 250px;
            float: left;
            background-color: #ff0;
        }


        .phone li {
            float: left;
            width: 50%;
            text-align: center;
            line-height: 50px;
        }

        .phone li:first-child {
            color: blue;
            position: relative;
        }

        .phone li:last-child {
            color: green;
        }

        .phone li:first-child:after {
            content: "";
            width: 1px;
            height: 30px;
            background-color: #666;

            position: absolute;
            top: 10px;
            right: 0;
        }






        .main-body {
            width: 900px;
            float: right;
            background-color: #ff0;
        }


        .aside-job {
            margin: 10px;
            background-color: #ff0;
            border: 1px solid #000;
            border-radius: 6px;
            padding: 5px;
        }

        .aside-job p span {
            margin-right: 10px;
            position: relative;
        }

        .aside-job p span:after {
            content: "";
            width: 1px;
            height: 12px;
            background-color: #000;

            position: absolute;
            right: -7px;
            top: 3px;
        }

        .aside-job p span:last-child:after {
            /* width: 0; */
            /* height: 0; */
            /* opacity: 0; */
            /* display: none; */
            visibility: hidden;
        }


        .chat {
            padding-left: 10px;
            background-color: #ff0;
        }

        .chat img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .chat dd {
            margin-top: 10px;
        }

        .chat dt {
            text-align: center;
            margin-top: 10px;
        }

        .chat p {
            float: right;
            width: 160px;
            border: 1px solid #000;
            border-radius: 6px;
            margin-right: 10px;
            padding: 5px;

            /* 最小高度 */
            min-height: 24px;
        }
    </style>
</head>


<body>

    <div class="header">
        <div class="container clearfix">
            <h1 class="logo">
                <a href=""></a>
            </h1>
            <!-- ul本身浮动了  所以子元素的浮动不会导致高度塌陷 -->
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">首页</a>
                </li>
            </ul>

            <p>
                <i></i>
                <span>IOS</span>
                <i></i>
                <span>Android</span>
            </p>
        </div>
    </div>


    <div class="main">
        <div class="container clearfix">
            <!-- aside侧边栏 -->
            <div class="aside">
                <ul class="phone clearfix">
                    <li>
                        <i></i>
                        <span>交换手机</span>
                    </li>
                    <li>
                        <i></i>
                        <span>交换手机</span>
                    </li>
                </ul>

                <div class="aside-job">
                    <h3>web前端</h3>
                    <h4>20-40K</h4>
                    <p>
                        <span>武汉</span>
                        <span>一年以下</span>
                        <span>不要钱</span>
                    </p>
                </div>

                <dl class="chat">
                    <dt>13:33</dt>
                    <dd class="clearfix">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
                            alt="">
                        <p>聊天的内容</p>
                    </dd>
                    <dd class="clearfix">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
                            alt="">
                        <p>聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
                    </dd>
                    <dt>13:33</dt>
                    <dd class="clearfix">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
                            alt="">
                        <p>聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
                    </dd>
                    <dd class="clearfix">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
                            alt="">
                        <p></p>
                    </dd>
                </dl>
            </div>
            <div class="main-body">2</div>
        </div>
    </div>

</body>

</html>